<!doctype html>
<html>
	<head>
		<!--声明当前页码的编码集：charset=gbk,gb2312(中文编码),utf-8(国际编码)-->
		<meta http-equiv="content-Type" content="text/html;charset=utf-8">
		<!--当前页面的三要素-->
		<title>第十二节，background背景属性</title>
		<meta name="keywords" content="关键词,关键词">
		<meta name="description" content="">

		<!--css,js-->
		<style type="text/css">
			*{margin:0;padding:0;}
			body{font-size:12px;font-family:"微软雅黑"; color:#000;background:url(images/41.jpg) repeat-Y;
			background-position:top right;}
			.test_background{width:600px;height:160px;background:#6699ff;}
			.images{background:url("images/9.png");width:600px;height:60px;padding:5px 0;}
			.images1{background:url("images/9.png");width:600px;height:100px;background-repeat:no-repeat;}
			.images11{background:url("images/9.png") no-repeat;width:600px;height:100px;}
			.images2{background:url("images/9.png");width:600px;height:100px;background-repeat:repeat-x;}
			.images3{background:url("images/9.png");width:600px;height:100px;background-repeat:repeat-y;}
		</style>
	</head>
<body>
	<h1>第十二节，background背景属性</h1>	
	<div class="test_background">
	<pre>
	<h3>一、css样式</h3>
	 1 文本的颜色（color ，背景<background-color>） ;
	 2 字符间距 （letter-spacing: 20px; letter-spacing: -0.5em;）;
	 3 行间距 （line-height: 30px; line-height: 200%; line-height: 2;）;
	 4 对齐文本 （text-align: center/left/right） ;
     注：10px=1em, 将原来的px数值除以10，然后换上em作为单位就ok
	</pre>
	</div>

	<div class="images">
	<h3>二、定义图片做背景</h3>
	css样式为
	{background:url("images/9.png");width:600px;height:60px;padding:5px 0;}
	</div>

	<div class="images1">qqqqqqqqqqqq</div><div class="images11">qqqqqqqqqqqq</div>
	<h3>三、图片做背景-不重复</h3>
	css样式为
	{background:url("images/9.png");width:600px;height:100px;background-repeat:no-repeat;}

	<div class="images2">
	<h3>四、图片做背景-X重复</h3>
	css样式为background-repeat:repeat-x;
	</div>

	<div class="images3">
	<h3>五、图片做背景-Y重复</h3>
	css样式为background-repeat:repeat-Y;
	</div>
	<div class="test_background">
	<pre>
	<h3>六、背景图片的位置</h3>
	 1 设置方法{background-position:垂直方向位置 水平方向位置;}
	 2 垂直方向有默认的top center bottom水平方向有默认的left center right
	 3 百分比形式：{background-position:20% 20%;}规定一个，另一个默认为50%
	 4 具体位置，左上角为（0,0）{background-position:20px 20px;}
     注：10px=1em, 将原来的px数值除以10，然后换上em作为单位就ok
	</pre>
	</div>
</body>
</html>